<template>
  <div style="margin: 20px">
    <el-form :model="queryForm" ref="queryForm" :rules="rules" class="demo-form-inline">
      <el-row>
        <el-col :span="12">
          <el-form-item label="登录账户" label-width="100px" prop="accountName">
            <el-input v-model="queryForm.accountName" placeholder="登录账户" :maxlength="10" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称" label-width="100px" prop="userName">
            <el-input v-model="queryForm.userName" placeholder="用户名称" :maxlength="10" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="角色" label-width="100px">
            <el-select v-model="queryForm.roleId" multiple clearable placeholder="角色">
              <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" label-width="100px">
            <el-radio v-model="queryForm.sex" :label="0">男</el-radio>
            <el-radio v-model="queryForm.sex" :label="1">女</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="邮件地址" label-width="100px" prop="mail">
            <el-input v-model="queryForm.mail" placeholder="邮件地址" :maxlength="30" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" label-width="100px" prop="phone">
            <el-input v-model="queryForm.phone" placeholder="手机号" :maxlength="11" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="年龄" label-width="100px">
            <el-input v-model="queryForm.age" placeholder="年龄" :maxlength="3" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址" label-width="100px">
            <el-input v-model="queryForm.address" placeholder="地址" :maxlength="100" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'UserAdd',
  props: {
    userId: {
      type: Number,
      default: 0
    },
    // 弹框的开关
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    dialogShow () {
      // 打开的时候
      if (this.dialogShow) {
        if (this.userId > 0) {
          this.getUser(this.userId)
        }
      } else {
        // 清空
        this.resetForm()
      }
    }
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      var regExp = /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9]|17[1-9])[0-9]{8}$/
      if (!regExp.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      queryForm: {
        userId: this.userId,
        userName: '', // 用户名称
        accountName: '', // 账户名称
        roleId: [], // 角色ID
        status: '', // 状态
        sex: 0, // 性别
        phone: '', // 手机号
        age: '', // 年龄
        address: '', // 年龄
        mail: '' // 邮件地址
      },
      roleList: [],
      statusList: [],
      rules: {
        accountName: [
          { required: true, message: '请输入登录账户', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: checkPhone, message: '请输入正确的手机号', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted () {
    if (this.userId > 0) {
      this.getUser(this.userId)
    }
  },
  created() {
    // 获取角色信息
    this.getRoleList()
  },
  methods: {
    getRoleList() {
      this.$http.get('/frontend/api/role/roleList').then(res => {
        this.roleList = res
      }).catch(errer => {
        this.$message.error(errer.message)
      })
    },
    // 清空
    resetForm() {
      this.queryForm = {}
      this.$refs['queryForm'].resetFields()
    },
    // 获取用户信息
    getUser(userId) {
      this.$http.get('/frontend/api/user/' + userId).then(res => {
        this.queryForm = res
      }).catch(errer => {
        this.$message.error(errer.message)
      })
    },
    save (success) {
      console.info(this.queryForm)
      debugger
      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          const param = {
            userId: this.userId,
            userName: this.queryForm.userName, // 用户名称
            accountName: this.queryForm.accountName, // 账户名称
            roleId: this.queryForm.roleId, // 角色ID
            sex: this.queryForm.sex, // 性别
            phone: this.queryForm.phone, // 手机号
            age: this.queryForm.age, // 年龄
            address: this.queryForm.address, // 年龄
            mail: this.queryForm.mail // 邮件地址
          }
          this.$http.post('/frontend/api/user/save', param).then(result => {
            success()
          }, result => {
            this.$message.error(result.message)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
